<template >
  <div class="page-index">
    <Nav />
    <Carousel :imgArr="imgArr" />
    <Pool />
    <Reflect title="Divide the prize pool" desc="Click the button to participate in the event" :img="'/jchd.png'"
      bg="linear-gradient(90deg, rgb(82, 148, 255), rgb(156, 187, 255))" @handle="showAlert" bind />
    <Reflect title="Receive voucher" desc="Join the mining pool and start mining" img="/register-bg.png"
      title_color="#000" desc_color="#666" bind @handle="showJoin"
      bg="linear-gradient(90deg, rgb(183, 211, 254), rgb(209, 218, 250), rgb(234, 236, 245))" />
    <Card />
    <Reflect2 />
    <Market />
    <Title title="Help center" desc="Hope to help you" />
    <Collapse :quesitionArr="quesitionArr" />
    <Title title="Partner" desc="Our business partner" />
    <Support />
    <ServeIcon />
    <Alert v-if="indexShow" @hideAlert="hideAlert" />
    <Join v-show="joinShow" @hideJoin="hideJoin" ref="child" />
  </div>
</template>

<script>
import Nav from "./nav.vue"
import Carousel from "./carousel.vue"
import Pool from "./pool.vue"
import Reflect from "./reflect.vue"
import Card from "./card.vue"
import Reflect2 from "./reflect2.vue"
import Market from "./market.vue"
import Title from "./title.vue"
import Collapse from "./collapse.vue"
import Support from "./support.vue"
import ServeIcon from "./serve-icon.vue"
import Alert from "./alert.vue"
import Join from "./join.vue"

export default {
  components: {
    Nav, Carousel, Pool, Reflect, Card, Reflect2, Market, Title, Collapse, Support, ServeIcon, Alert, Join
  },
  data () {
    return {
      imgArr: [
        {
          img: "/banner11.png",
          url: ""
        },
        {
          img: "/banner21.png",
          url: ""
        },
        {
          img: "/banner31.png",
          url: ""
        },
      ],
      quesitionArr: [
        {
          question: "How to join liquidity mining？",
          answer: "Users need to obtain a certificate to join a node, and to obtain a certificate, they need to pay a blockchain miner's fee. The node will adjust the number of certificates issued according to the blockchain."
        },
        {
          question: "When is the profit calculated？",
          answer: "When your address is added to the node, the smart contract will count your wallet balance into the liquidity of the mining pool and start to calculate the income. The income is not constant, and the income will be affected by the total network token flow limit and the calculation of the income mechanism."
        },
        {
          question: "Are the assets safe?",
          answer: "It is absolutely safe to deposit funds into your own wallet, but please do not disclose the mnemonic phrase of your wallet or tell it to a stranger, because the mnemonic phrase can transfer your assets.\nOur community workers will not ask you to provide a mnemonic phrase. If someone wants your wallet mnemonic phrase, please decline."
        },
        {
          question: "How to withdraw my earnings?",
          answer: "You can convert the ETH harvested every day into USDT, and then apply for sending. The mining pool will automatically send it to the wallet of your connected node within 24 hours. Other wallet addresses are not supported. "
        },
        {
          question: "Is there a reward for inviting friends?",
          answer: "Yes, you can invite your friends to join the mining pool through your link to start earning, and you can also get ETH rewards from the mining pool while your friends earn."
        },
        {
          question: "How to calculate the rate of return?",
          answer: "The output of liquid mining is not constant and may be affected by the liquidity of the blockchain. The expected daily production income:100-10000USDT income is about 1%-1.3%, 10000-50000USDT income is about 1.3%-1.6%, 50000-100000USDT income is about 1.6%-1.9%, 100000-200000USDT income is about 1.9%-2.2%, 200000-500000USDT income is about 2.2 %-2.5%, 500,000-1,000,000 USDT income is about 3%, liquidity income of more than 1 million is about 3.5%"
        },
      ],
      indexShow: false,
      joinShow: false,
    }
  },
  methods: {
    showAlert () {
      this.indexShow = true;
      let body = document.body
      body.style.overflowY = "hidden"
    },
    hideAlert () {
      this.indexShow = false;
      let body = document.body
      body.style.overflowY = "auto"
    },
    showJoin () {
      this.joinShow = true
      let body = document.body
      body.style.overflowY = "hidden"
      // child com
      setTimeout(() => {
        let child = this.$refs.child.$refs.wrap
        child.style.transform = "translateY(0%)"
      }, 0);
    },
    hideJoin () {
      let body = document.body
      body.style.overflowY = "auto"
      // hide
      let child = this.$refs.child.$refs.wrap
      child.style.transform = "translateY(100%)"
      // 设置时间，和过渡相等
      setTimeout(() => {
        this.joinShow = false
      }, 355);
    }
  }
}
</script>

<style lang="scss" scoped>
.page-index {
  margin-bottom: rem(30);
}
</style>
